
<template>
    <div>
      <el-select
        v-bind="$attrs"
        filterable
        remote
        :remote-method="remoteMethod"
        :loading="loading"
        remote-show-suffix
      >
        <el-option
          v-for="item in options"
          :key="item.flowCardId"
          :label="item.flowCardNum"
          :value="item.flowCardId"
        />
      </el-select>
    </div>
  </template>
  <script setup>
  import { getflowcardops } from "@/api/operate/gateway-administration/index";
  const options = ref([]);
  const list = ref([]);
  getflowcardops().then(res => {
    options.value = res.result;
    list.value = res.result;
  });
  const loading = ref(false);
  const remoteMethod = query => {
    if (query) {
      loading.value = true;
      setTimeout(() => {
        loading.value = false;
        options.value = list.value.filter(item => {
          return item.nickname.includes(query);
        });
      }, 200);
    } else {
      options.value = list.value;
    }
  };
  </script>
  <style lang="scss" scoped></style>
  
